<%@page import="com.fasterxml.jackson.annotation.JsonInclude.Include"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="zh-CN">
	<%@ include file="/WEB-INF/include-head.jsp" %>
	
	<link rel="stylesheet" href="ztree/zTreeStyle.css">
	<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
	<script type="text/javascript" src="crowd-js/my-menu.js?7"></script>  <!--引入外部js的时候，?加任意数字，可以防止浏览器缓存上一次的js，这样就不用经常清理缓存了-->
	<script type="text/javascript">
		$(function () {
					
			//调用专门封装好的函数初始化树形结构
			generateTree();


			//[添加子节点]
			//给添加子节点的按钮绑定单击响应函数
			$("#treeDemo").on("click",".addBtn",function(){

				//将当前节点的id作为新节点的pid保存到全局变量
				window.pid=this.id;

				//打开模态框
				$("#menuAddModal").modal('show');

				return false;
			});
			//给添加子节点的模态框中的保存按钮绑定单击响应函数
			$("#menuSaveBtn").click(function() {

				debugger;

				//收集表单项中用户输入的数据
				var  name=$.trim($("#menuAddModal [name=name]").val());   // $.trim() 删除字符串开始和末尾的空格
				var  url=$.trim($("#menuAddModal [name=url]").val());

				// 单选按钮要定位到 “被选中” 的 那一个
				var icon=$.trim($("#menuAddModal [name=icon]:checked").val());

				//发送Ajax请求
				$.ajax({
					"url":"menu/save.json",
					"type":"post",
					"data":{
							"pid":window.pid,
							"name":name,
							"icon":icon,
							"url":url,
						},
					"async":true,
					"success":function(response){
						var result=response.result;
						if (result=="SUCCESS"){
							layer.msg("操作成功！");

							// 重新加载树形结构
							generateTree();

							//模拟点击模态框的重置按钮——以此来实现清空功能
							$("#menuResetBtn").click();
						}
						if (result=="FAILED"){
							layer.msg("操作失败！："+response.measure);
						}
					},
					"error":function(response) {
							layer.msg(response.status+ " "+response.statusText);
					}

				});
				debugger;
				//关闭模态框
				$("#menuAddModal").modal("hide");
			});


			//【编辑/修改】
            //给 编辑/修改 子节点的按钮绑定单击响应函数
            $("#treeDemo").on("click",".editBtn",function(){

                debugger;
                //alert("你点击了子节点的 修改 按钮，即将进行修改");
                //将当前节点的id 保存到全局变量（注意跟新增是不一样的，新增是当成当前节点的pid）
                window.id=this.id;

                //打开模态框
                $("#menuEditModal").modal('show');

                //回显要准备的数据
                var zTreeObj=$.fn.zTree.getZTreeObj("treeDemo");

                //根据id属性查询节点对象
                //用来搜索节点的属性名
                var key="id";

                //用来搜索节点的属性值
                var value=window.id;

                var currentNode=zTreeObj.getNodeByParam(key,value);

                //回显表单数据
                $("#menuEditModal [name=name]").val(currentNode.name);
                $("#menuEditModal [name=url]").val(currentNode.url);
                //回显radio可以这样理解，，被选中的radio的value属性可以组成一个数组
                //然后再用这个数组设置会radio，就能够把对应的值选中了
                $("#menuEditModal [name=icon]").val([currentNode.icon]);

                return false;
            });

        //给 编辑/修改 子节点的 模态框 中的 保存 按钮 绑定 单击响应 函数
        $("#menuEditBtn").click(function() {

            debugger;

            //收集表单项中用户输入的数据
            var  name = $.trim($("#menuEditModal [name=name]").val());   // $.trim() 删除字符串开始和末尾的空格
            var  url = $.trim($("#menuEditModal [name=url]").val());
            var icon = $.trim($("#menuEditModal [name=icon]:checked").val());

            if (name==""||url==""||icon==""){
            		alert("有空数据，不能为空");
            		return;
				}

            //发送Ajax请求
            $.ajax({
                "url":"menu/update.json",
                "type":"post",
                "data":{
                    "id":window.id,
                    "name":name,
                    "icon":icon,
                    "url":url
                },
                "dataType":"json",
                "async":true,
                "success":function(response){
					var result=response.result;
					if (result=="SUCCESS"){
					layer.msg("操作成功！");

					// 重新加载树形结构
					generateTree();

						}
					if (result=="FAILED"){
						layer.msg("操作失败！："+response.measure);
					}
                },
                "error":function(response) {

                 	layer.msg(response.status+ " "+response.statusText);
                }

            });
			//关闭模态框
			$("#menuEditModal").modal("hide");
		});
        
		//【删除】
		//给 删除 子节点的按钮绑定单击响应函数
		$("#treeDemo").on("click",".removeBtn",function(){
	
		//debugger;
		//alert("你点击了子节点的 删除");
		//将当前节点的id 保存到全局变量（注意跟新增是不一样的，新增是当成当前节点的pid）
		window.id=this.id;
	
		//打开模态框
		$("#menuConfirmModal").modal('show');
	
		//回显要准备的数据
		var zTreeObj=$.fn.zTree.getZTreeObj("treeDemo");
	
		//根据id属性查询节点对象
		//用来搜索节点的属性名
		var key="id";
	
		//用来搜索节点的属性值
		var value=window.id;
	
		var currentNode=zTreeObj.getNodeByParam(key,value);
	
		//显示要删除的信息
		$("#removeNodeSpan").html("【<i class='"+currentNode.icon+"'></i> "+currentNode.name+"】");
		
		return false;
		
		});
	
		//给  删除  子节点的 模态框 中的 保存 按钮 绑定 单击响应 函数
		$("#confirmBtn").click(function() {
	
			debugger;
		
			//转换为json字符串，后端用@RequestBody Menu menu 接收参数
			var requestBody = JSON.stringify({
											"id":window.id,
											"name":name
											});
			//转换为json字符串，后端用@RequestBody List<Integer> ids接收参数
			var requestBody = JSON.stringify([window.id]);
	
			//不转成json对象字符串，后端用@RequestParam接收参数
			var requestBody = {
					    "id":window.id,
						"name":name
					};
			
		//发送Ajax请求
		$.ajax({
			"url":"menu/remove3.json",
			"type":"post",
			"data":requestBody,
			/*"contentType":"application/json;charset=UTF8",不转成json对象字符串，就不要写这个，否则会报错*/
			"dataType":"json",
			"async":true,
			"success":function(response){
			 
				var result=response.result;
				if (result=="SUCCESS"){
				 
					layer.msg("操作成功！");
			
				// 重新加载树形结构
				generateTree();
			}
			if (result=="FAILED"){
			layer.msg("操作失败！："+response.measure);
			}
			},
			"error":function(response) {
		
			layer.msg(response.status+ " "+response.statusText);
			}
		
		});
		//关闭模态框
		$("#menuConfirmModal").modal("hide");
		});

	});

	</script>
	
  <body>
  		<%@ include file="/WEB-INF/include-nav.jsp" %>
    <div class="container-fluid">
			<%@ include file="/WEB-INF/include-sidebar.jsp" %>


		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

			<div class="panel panel-default">
				<div class="panel-heading">
					<i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
					<div style="float: right; cursor: pointer;" data-toggle="modal"
						data-target="#myModal">
						<i class="glyphicon glyphicon-question-sign"></i>
					</div>
				</div>
				<div class="panel-body">
					<!-- 这个ul标签是zTree动态生成的节点所依附的静态节点 -->
					<ul id="treeDemo" class="ztree">
						<!-- 其它的节点会动态生成 -->
					</ul>
				</div>
			</div>
		</div>

	</div>

	<%@include file="/WEB-INF/menu/modal-menu-add.jsp"%>
	<%@include file="/WEB-INF/menu/modal-menu-edit.jsp"%>
	<%@include file="/WEB-INF/menu/modal-menu-confirm.jsp"%>

  </body>
</html>
